<template>
  <!-- 采购订单明细 -->
  <div class="table-w">
    <a-table class="table-normal-line show-border-table" ref="tableRef" :summary="true" :data="currentData.billItems" :scroll="{ y: '100%' }" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="sort" title="序号" :width="45" fixed="left">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column title="采购单" :width="100" fixed="left">
          <template #cell="{ record }">
            <p>{{ record.purchaseNo }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="img" title="图片" :width="60" fixed="left">
          <template #cell="{ record }">
            <ImgPopover :src="record.productImg">
              <template #con>
                <a-image width="40" height="40" fit="contain" :src="record.productImg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="产品名称" :width="120" fixed="left">
          <template #cell="{ record }">
            <TextLimit :val="record.productName" :rows="1" />
          </template>
        </a-table-column>
        <a-table-column data-index="sku" title="SKU/类目" :width="100" fixed="left">
          <template #cell="{ record }">
            <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="1" />
            <p>{{ record.cateName || '--' }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="productSpecs" title="规格名" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="getProductSpecs(record)" />
          </template>
        </a-table-column>
        <a-table-column data-index="deliveryAmt" title="交货数" :width="70">
          <template #title>
            <a-popover content="交货单创建是填写的交货数">
              <p>
                <span>交货数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="deliveryRealAmt" title="实际交货数" :width="85">
          <template #title>
            <a-popover content="确认交货单时实际收到的数量">
              <p>
                <span>实际交货数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="deliveryDiffAmt" title="交货差额" :width="80">
          <template #title>
            <a-popover content="交货差额=交货数量-实际交货数量">
              <p>
                <span>交货差额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="warehouseRealAmt" title="已入库数" :width="70">
          <template #title>
            <a-popover content="交货单实际入库的数量">
              <p>
                <span>已入库数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="warehouseReturnAmt" title="仓库退回数" :width="85">
          <template #title>
            <a-popover content="仓库签收入库时会再次清点检查数量，这里的退回数=实际交货数-实际入库数">
              <p>
                <span>仓库退回数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column title="税率" :width="80">
          <template #cell="{ record }">
            <p>{{ record.rate }}%</p>
          </template>
        </a-table-column>
        <a-table-column title="单价" :width="80">
          <template #cell="{ record }">
            <p class="price-type highlight">{{ record.priceType === 1 ? '含税' : '不含税' }}</p>
            <p>￥{{ record.price }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="deliveryValue" title="已交货金额" :width="85">
          <template #title>
            <a-popover content="已交货金额=单价*实际交货数">
              <p>
                <span>已交货金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p class="price-type highlight">{{ record.priceType === 1 ? '含税' : '不含税' }}</p>
            <p>￥{{ record.deliveryValue }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="singleLaborCosts" title="单件工费" :width="80">
          <template #cell="{ record }">
            <p>￥{{ record.singleLaborCosts }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="unitCosts" title="单件成本" :width="80">
          <template #title>
            <a-popover content="单件成本=单价+单件工费">
              <p>
                <span>单件成本</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>￥{{ record.unitCosts }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="inventoryCosts" title="入库货值" :width="80">
          <template #title>
            <a-popover content="入库货值=单件成本*实际入库数">
              <p>
                <span>入库货值</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>￥{{ record.inventoryCosts }}</p>
          </template>
        </a-table-column>
      </template>
      <template #summary-cell="{ column, record }">
        <p v-if="column.dataIndex == 'sku'">合计</p>
        <p v-else-if="['deliveryAmt', 'deliveryRealAmt', 'deliveryDiffAmt', 'warehouseRealAmt', 'warehouseReturnAmt'].includes(column.dataIndex)">{{ record[column.dataIndex] }}</p>
        <p v-else-if="['deliveryValue', 'inventoryCosts'].includes(column.dataIndex)">￥{{ record[column.dataIndex] }}</p>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { parseJson } from '@/utils'
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
</script>
<style lang="less" scoped>
  .product-list-w {
    flex: 1;
    background-color: #fff;
    display: flex;
    padding: 0 20px;
    flex-direction: column;
    overflow: hidden;
  }
  .header {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .price-type {
    font-size: 12px;
    transform: scale(0.82);
    position: relative;
    left: -4px;
  }
  .table-w {
    flex: 1;
    overflow: hidden;
  }
</style>
